<section class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div
		class="container flex flex-col justify-center p-6 mx-auto sm:py-12 lg:py-24 lg:flex-row lg:justify-between"
	>
		<div
			class="flex items-center justify-center p-6 mt-8 lg:mt-0 h-72 sm:h-80 lg:h-96 xl:h-112 2xl:h-128"
		>
			<img
				class="object-contain h-72 sm:h-80 lg:h-96 xl:h-112 2xl:h-128"
				src="assets/svg/Business_SVG.svg"
				alt=""
			/>
		</div>
		<div
			class="flex flex-col justify-center p-6 text-center rounded-sm lg:max-w-md xl:max-w-lg lg:text-left"
		>
			<h1 class="text-5xl font-bold leading-none sm:text-6xl">
				Ac mattis
				<span [ngClass]="['text' + primary]">senectus</span>
				erat pharetra
			</h1>
			<p class="mt-6 mb-8 text-lg sm:mb-12">
				Dictum aliquam porta in condimentum ac integer
				<br class="hidden md:inline lg:hidden" />
				turpis pulvinar, est scelerisque ligula sem
			</p>
			<div
				class="flex flex-col space-y-4 sm:items-center sm:justify-center sm:flex-row sm:space-y-0 sm:space-x-4 lg:justify-start"
			>
				<a
					class="px-8 py-3 text-lg font-semibold rounded"
					rel="noopener noreferrer"
					href="#"
					[ngClass]="['bg' + primary, 'text' + contrast]"
				>
					Suspendisse
				</a>
				<a
					class="px-8 py-3 text-lg font-semibold border rounded"
					rel="noopener noreferrer"
					href="#"
					[ngClass]="['border' + defaultInv]"
				>
					Malesuada
				</a>
			</div>
		</div>
	</div>
</section>
